<template>
  <div class="category">
    <van-sidebar v-model="active">
      <van-sidebar-item
        :title="item.title"
        :badge="item.badge"
        v-for="item in categorytitle"
        :key="item.id"
        @click="onchange(item.id)"
      />
    </van-sidebar>
    <div class="categoryList">
      <ul>
        <li
          v-for="item in categoryList"
          :key="item.id"
          @click="godetails(item.id)"
        >
          <img :src="item.imgurl" style="width: 100px; height: 100px" />
          <div style="margin-left: 10px">
            <p class="text" style="font-size: 16px; font-weight: bold">
              {{ item.title }}
            </p>
            <p style="font-size: 10px; color: darkgray; margin: 7px 0">
              已购<span style="color: red">{{ item.salesvolume }}</span
              >件
            </p>
            <div
              style="
                width: 40px;
                border: 1px solid red;
                font-size: 12px;
                color: red;
                text-align: center;
                border-radius: 20px;
                font-weight: bold;
              "
            >
              {{ item.text }}
            </div>
            <p style="color: red; margin-top: 5px; font-weight: bold">
              ￥{{ item.price }}
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import router from "@/router";
import request from "@/utils/request";
export default {
  name: "category",
  data() {
    return {
      active: 0,
      // 分类商品标题
      categorytitle: [],
      // 分类商品数据
      categoryList: [],
    };
  },
  async created() {
    const result = await request.get("/good/categorytitle");
    const result1 = await request.get("/good/categorydata?id=" + 1);
    this.categorytitle = result.data.categorytitle;
    this.categoryList = result1.data.categorydata;
  },
  methods: {
    async onchange(id) {
      const result = await request.get("/good/categorydata?id=" + id);
      if (result.data.code === 200) {
        this.categoryList = result.data.categorydata;
      }
    },
    // 跳转详情页]
    godetails(id) {
      router.push({ path: "/details", query: { categoryid: id } });
    },
  },
};
</script>
<style lang="scss">
.category {
  display: flex;
  background-color: #fff;
  .categoryList {
    flex: 1;
    background-color: #f7f8fa;
    padding-left: 10px;
    height: 85vh;
    overflow-y: auto;
    // display: flex;
    ul {
      li {
        width: 100%;
        height: 120px;
        display: flex;
        margin-bottom: 10px;
        padding-top: 20px;
        .text {
          @font-face {
            font-family: "香萃零度黑";
            src: url("../../../public/xiangcuilingduhei.ttf");
          }
          font-family: "香萃零度黑";
        }
      }
    }
  }
}
.van-sidebar-item--select::before {
  background-color: red;
}
</style>
